<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
    <style type="text/css">
      .grid {
        margin: auto;
        width: 500px;
        text-align: center;
      }
      .grid table {
        width: 100%;
        border-collapse: collapse;
      }
      .grid th,td {
        padding: 10;
        border: 1px dashed orange;
        height: 35px;
        line-height: 35px;
      }
      .grid th {
        background-color: orange;
      }
      .grid .book {
          padding-bottom: 10px;
          padding-top: 5px;
          background-color: orange;
      }
    </style>
</head>
<body>
    <div id="app">
      <div class="grid">
            <h1>图书管理</h1>
            <div class="book">
              <div>
                <label for="id">
                  编号：
                </label>
                <input type="text" id="id" v-model.number='id'>
                <label for="name">
                  名称：
                </label>
                <input type="text" id="name" v-model='name'>
                <button @click='addbook'>提交</button>
              </div>
            </div>
            <div class="book">
                <label for="name">
                    搜索：
                </label>
                <input type="text" v-model="ftxt">
            </div>
            <table>
              <tr>
                  <th>编号</th>
                  <th>名称</th>
                  <th>时间</th>
                  <th>操作</th>
              </tr>
              <tr v-for="b,i in findbook(ftxt)" :key="b.id">
                 <td>{{b.id}}</td>
                 <td>{{b.name}}</td>
                 <td>{{b.date | mydate}}</td>
                 <td>
                    <a href="#" @click.prevent="toedit(i)">修改</a>
                    <a href="#" @click.prevent="delbook(i)">删除</a>
                 </td>
              </tr>
            </table>
      </div>
    </div>
</body>
<script>
// 日期过滤器
Vue.filter('mydate',function(v){
   var d = new Date(v);
   return  d.toLocaleString();
});

var vm = new Vue({
    el: "#app",
    data: {
        books: [{
          id: 1,
          name: '三国演义',
          date: '1933-10-1'
        },{
          id: 2,
          name: '水浒传',
          date: ''
        },{
          id: 3,
          name: '红楼梦',
          date: ''
        },{
          id: 4,
          name: '西游记',
          date: ''
        }],
        id: '',
        name:'',
        ftxt:''
    },
    methods:{
      // 1 新增，2修改
      addbook(){
        var b = { id: this.id , name:this.name , date:Date.now()}
        var obj = this.books.find( item=>{
           return item.id == this.id
        })
        if(obj ){ //存在
           obj.name = this.name;
        }else{  // 不存在 新增
           this.books.push(b)
        }
      },
      delbook(i){
        this.books.splice(i,1)
      },
      //书籍的搜索
      findbook(txt){
            let newlist =  this.books.filter(item=>{
              if(item.name.includes(txt)){
                return item;
              }
            });
            return newlist;
      },
      toedit(i){
         var b =  this.books[i] ;// 一本
         this.id = b.id;
         this.name = b.name ;
      }
    }
});

</script>
</html>